<style>
    .tools-btn { padding: 5px 7px; border-radius: 12px; }

    
    .send-item-list li, .send-pet-list li { margin: 8px 0; }
    .send-item-list li .form-control, .send-pet-list li .form-control { margin-right: 2px; }
    .div_item_name{float: left;}
    .div_item_id{float: left;}
    form{margin-bottom: 300px;}
    .check_div{max-width: 500px; line-height: 25px;}
    .check_input{width: 100px;float: left;}
    #editor{
    	border: 1px solid #009F95;
    	width: 80%;
    	min-height: 200px;
    }
</style>
<link rel="stylesheet" type="text/css" href="/public/static/plugin/inputSearch/autocomplete.css" />
<link rel="stylesheet" type="text/css" href="/public/static/plugin/jQuerycxColor/css/jquery.cxcolor.css" />
<form method="post" action="/oss/?r=noticeSet/doEdit">
    <{include file='../common_params.tpl'}>
    <input type="hidden" name="id" value="<{$info.id}>" />
    <div class="box box-black">
        <div class="box-body">
            <table class="table table-bordered">
                <colgroup>
                    <col style="width: 20%;"></col>
                    <col style="width: 80%;"></col>
                </colgroup>
                

                
                <tr class="type-info" for="1">
                    <th class="th-label">公告标题</th>
                    <td>
                        <input type="text" class="form-control inline" style="width: 150px;" name="title" id="title" value="<{$info.title}>" />
                    </td>
                </tr>
                
                <tr class="type-info" for="1">
                    <th class="th-label">公告位置</th>
                    <td>
                        <input type="checkbox" class="form-control inline" name="type[]" value="1" <{if in_array(1,$typeList) }>checked<{/if}> />&nbsp;游戏内&nbsp;&nbsp;
                        <input type="checkbox" class="form-control inline" name="type[]" value="2" <{if in_array(2,$typeList) }>checked<{/if}> />&nbsp;选服页
                    </td>
                </tr>
                
                <tr>
                    <th class="th-label">公告内容</th>
                    <textarea style="display: none;" class="" name="content" id="content" rows="10" style="width: 60%;"></textarea>
                    <td>
                    	<div>
                    		  <input type="button" id="btn0" value="清除格式" />
                    		  <input type="button" id="btn1" value="加粗" />
                    		  <input type="button" id="btn2" value="斜体" />
                    		  <input type="button" id="btn3" value="下划线" />
                    		  <!--<input type="button" id="btn5" value="大小" />-->
                    		  <select id="btn5">
                    		  	<option value="">字体大小</option>
                    		  	<option value="25">25</option>
                    		  	<option value="26">26</option>
                    		  	<option value="27">27</option>
                    		  	<option value="28">28</option>
                    		  	<option value="29">29</option>
                    		  	<option value="30">30</option>
                    		  	<option value="31">31</option>
                    		  	<option value="32">32</option>
                    		  	<option value="33">33</option>
                    		  	<option value="34">34</option>
                    		  	<option value="35">35</option>
                    		  </select>
                    		  <input id="color_d" type="text" class="input_cxcolor" readonly value="#009900">
                    		  <input type="button" id="btn4" value="颜色" data-color = "#009900" />
                    	</div>
                    	<div id="editor">
                         <{$info.content}>
                       </div>
                    </td>
                </tr>
<script src="/public/static/plugin/jQuerycxColor/js/jquery.cxcolor.min.js"></script>  
<script>
	var color=$("#color_d");

	var mycolor;
	color.bind("change",function(){
		//alert(this.value);		
		$("#btn4").attr('data-color',this.value);
	});

	mycolor=$("#color_d").cxColor();
</script>
<script type="text/javascript">
	
  	     var editor = document.getElementById('editor');
         editor.contentEditable = true;
       
        $("#btn1").click(function(){
        	var text = $("#editor").html();        	
        	var append = window.getSelection().toString();         	
        	append_l = '<b>'+append+'</b>';   	
        	str=text.replace(append,append_l);       	        	
        	$("#editor").html(str);
        });      
        
        
        $("#btn2").click(function(){
        	var text = $("#editor").html();        	
        	var append = window.getSelection().toString();       	
        	append_l = '<i>'+append+'</i>'       	    	
        	str=text.replace(append,append_l);       	
        	$("#editor").html(str);
        });
        
        $("#btn3").click(function(){
        	var text = $("#editor").html();        	
        	var append = window.getSelection().toString();       	
        	append_l = '<u>'+append+'</u>'       	    	
        	str=text.replace(append,append_l);       	
        	$("#editor").html(str);
        });
        
        $("#btn4").click(function(){
        	var text = $("#editor").html();        	
        	var append = window.getSelection().toString(); 
        	var data_color = $(this).attr('data-color');
        	append_l = '<font color="'+data_color+'">'+append+'</font>'       	
        	str=text.replace(append,append_l);       	
        	$("#editor").html(str);
        });
        
        $("#btn5").change(function(){
        	var text = $("#editor").html(); 
        	var size = $(this).val();
        	var append = window.getSelection().toString();       	
        	append_l = '<font size="'+size+'">'+append+'</font>'       	    	
        	str=text.replace(append,append_l);       	
        	$("#editor").html(str);
        });

        $("#btn0").click(function(){
        	var text = $("#editor").text();        	
        	console.log(text);
        	$("#editor").html(text);
        });
        
  </script>
                
                <tr>
                    <th class="th-label">是否弹出</th>
                    <td>
                    	<select name="is_eject" class="form-control inline">
                            <{foreach from=$isEjectList item=item key=key}>
                            <option value="<{$key}>" <{if $key == $info.is_eject}>selected<{/if}>><{$item}></option>
                            <{/foreach}>
                        </select>
                    </td>
                </tr>         
   
                
                

                

            </table>
        </div>

        <div class="box-footer">
            <a href="javascript:history.go(-1);" class="btn btn-default">返回</a>
            
            <button type="submit" name="sub" class="btn btn-default pull-right">保存</button>

        </div>
    </div>
</form>


<script>
    $(function(){
    	var editor = $('#editor').text();
    	console.log(editor);
    	$('#editor').html(editor);			   
    	
    	$(".time").datetimepicker({
            format: 'yyyy-mm-dd hh:ii',
        });
        
        $(".time_day").datetimepicker({
            format: 'yyyy-mm-dd',
        });
        
       
    	
    	
    	
    	


        
        
        var nameflag = true;
        var idflag = true;
        var numberflag = true;
        $('button[name="sub"]').click(function(){
        	var editor =  $('#editor').html();
        	console.log(editor);
        	$('#content').val(editor);
        	console.log($('#content').val());
        	//return false;
        	var title = $('input[name="title"]').val();
        	if(title == ''){
        		layer.alert('请填写公告标题', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
        	}
        	
        });
        
    });
    
    

</script>






